<template>
  <div class="prolist">
    <div class="scroll">
      <!-- <div><span>综合</span><span>销量</span><span>价格</span></div> -->
      <ul class="content">
        <li v-for="item in list" :key="item.productId" @click="goDetail(item.productId)" class="perPro">
          <div>
            <img :src="item.img">
          </div>
          <div>
            <p class="proname">{{ item.proname }}</p>
            <p>
              <span class="gettime">{{ item.gettime }}</span>
              <span class="iszhijiang">{{ item.iscutdownmoney ? "直降" : "" }}</span>
            </p>
            <p style="color: #c8c6c6;margin: 10px 0 6px 0;">&yen;{{ item.oldprice == item.newprice ? "" : item.oldprice }}
            </p>
            <p style="position: relative;width: 35vw;">
              <span style="color:red;font-size: 14px;font-weight: bold;">&yen;{{ item.newprice }}</span> / {{ item.unit
              }} <span class="list_borit" @click.stop="addClick(item.productId)">+</span>
              <van-badge :content="5" style="position: absolute;right: 2px;bottom: 8px;">
              </van-badge>
            </p>

          </div>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Cart from '@/api/cart'
export default {
  props: {
    list: Array
  },
  data() {
    return {

    }
  },
  mounted() {
    this.getlis()
  },
  methods: {
    async addClick(productid) {
      console.log(productid);
      let res = await Cart['addcart']({ userid: 1, productid })
      localStorage.setItem('cartbln', true)
      console.log(this.list);
    },
    goDetail(productId) {
      this.$router.push({ path: `/proDetail/${productId}` })
    },
    async getlis(){
      let res = await Cart['getClubsList']({userid:1})
      console.log(res.data);
      console.log(this.list);
      // res.data.map(item=>{
      //   item.proid
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.prolist {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;

    .content {
      width: 100%;

      .perPro {
        box-sizing: border-box;
        padding: 10px;
        height: 120px;
        width: 100%;
        border-bottom: 1px solid #eee;
        display: flex;

        .proname {
          margin-bottom: 10px;
          // width: 100%;
        }

        .gettime {
          display: inline-block;
          padding: 0 4px 0 4px;
          background: rgb(179, 238, 140);
          color: rgb(27, 181, 55);
          border-radius: 4px;
          margin-right: 10px;
        }

        .iszhijiang {
          display: inline-block;
          padding: 0 4px 0 4px;
          background: rgb(236, 184, 184);
          color: rgb(234, 91, 80);
          border-radius: 4px;
        }

        img {
          width: 100px;
          height: 100px;
          margin-right: 10px;
        }
      }
    }

    .list_borit {
      display: inline-block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      line-height: 16px;
      border-radius: 8px;
      text-align: center;
      color: #fff;
      background: rgb(50, 215, 50);
      position: absolute;
      right: 10px;
    }
  }
}</style>